<template>
   <div class="common-contextmenu px-4" :style="comMenuStyle" :class="[menuClass]">
    <ul class="py-4">
      <li
        @click="selectItem(v)"
        v-for="(v, k) in data"
        :key="k"
        class="flex align-center px-4 py-4 text-12"
        @mouseenter="v.expand = true"
        @mouseleave="v.expand = false"
      >
        <component :is="v.icon"></component>
        <div class="flex justify-between w-100 align-center">
          <span class="ml-4">{{ v.text }}</span>
          <caret-right-outlined class="text-666" v-if="v.children" />
        </div>

        <ContextmenuTree
          :data="v.children"
          v-if="v.children && v.expand"
          v-model:show="v.expand"
          class="child-items"
        />
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
export default {
  name: "ContextmenuTree"
};
</script>

<script setup lang="ts">
import { contextmenuData } from "@/types/project";
import { addEvent, removeEvent } from "@/utils/utils";
import { computed, onUnmounted } from "vue";
const props = defineProps({
  data: {
    type: Array<any>
  },
  show: {
    type: Boolean
  },
  event: {
    type: MouseEvent
  },
  theme: {
    type: String,
    default: "light"
  }
});
const emit = defineEmits(["onClose"]);
const selectItem = (item: contextmenuData) => {
  item.event();
  emit("onClose");
};
const data = computed(() => {
  if (!props.data) return;
  return props.data.filter((item: { expand: boolean }) => {
    item.expand = false;
    return item;
  });
});
/* 点击外部关闭 */
function mousedown(e: MouseEvent) {
  var target = e.target as HTMLElement;
  var contenxtmenu = document.querySelector(".common-contextmenu");
  if (!contenxtmenu?.contains(target)) {
    emit("onClose");
  }
}
addEvent(window, "mousedown", mousedown);
/* 移除监听事件 */
onUnmounted(() => {
  removeEvent(window, "mousedown", mousedown);
});

const comMenuStyle = computed(() => {
  if (props.event) {
    var { x, y } = props.event;
    let computedX = 0;
    let offsetx = 0;
    if (window.innerWidth < 415) {
      /* 移动端 */
      offsetx = 150;
    } else {
      offsetx = 184;
    }
    if (x + 180 > window.innerWidth) {
      computedX = window.innerWidth - offsetx;
    } else {
      computedX = x;
    }
    return {
      left: computedX + "px",
      top: y + "px"
    };
  }
});

const menuClass = computed(() => {
  return props.theme;
});
</script>

<style lang="scss" scoped>
$primary-color: #faad14;
.common-contextmenu {
  position: fixed;
  z-index: 10;
  border-radius: 4px;
  width: 180px;
  ul {
    border-radius: 4px;
    overflow: hidden;
    color: black;
    padding: 0;
    margin: 0;
    li {
      border-radius: 4px;
      cursor: pointer;
      height: 28px;
      line-height: 28px;
      border: 1px solid transparent;
    }
  }
}

.child-items {
  position: absolute;
  left: calc(100% + 4px);
  &::after {
    content: "";
    position: absolute;
    width: calc(100% + 20px);
    height: 100%;
    left: -40px;
    top: 0;
    z-index: -1;
  }
}
.common-contextmenu.light {
  background-color: white;
  border: 1px solid #eee;
  li {
    &:hover {
      background-color: $primary-color;
      color: white;
    }
  }
}
.common-contextmenu.dark {
  background-color: #333;
  border: 1px solid #666;
  li {
    border-radius: 4px;
    color: white;
    &:hover {
      border: 1px solid $primary-color;
      color: white;
    }
  }
}
@media screen and (max-width: 445px) {
  .common-contextmenu {
    width: 150px;
  }
}
</style>
